<template>
	<view class="list">
			<view class="listItem" v-for="(item) in albumList" :name="item.artist" :key="item._id" @click="() => {goto(item._id)}">
				<img class="img" :src="item.cover" :alt="item.artist" />
				<span class="artistName">{{item.artist}}</span>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albumList: []
			};
		},
		mounted() {
			uniCloud.callFunction({
				name: 'albumList',
			}).then((res) => {
				this.albumList = res.result.data
				console.log('albumList', this.albumList);
			}).catch((err) => {
				console.error(err)
			})
		},
		methods: {
			goto: (id) => {
				console.log('click');
				uni.navigateTo({
					url: `/pages/musicList/musicList?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.listItem {
		display: flex;
		flex-direction: column;
		width: 50%;

		.img {
			width: calc(100%);
		}

		.artistName {
			font-size: 12px
		}
	}
</style>